/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-06-08 10:34:43
 * @LastEditTime : 2023-08-01 09:20:04
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Assets\Template\VideoTypeList.jsx
 * @Description  :
 */
import './Scss/VideoTypeList.scss'
import { Pagination, Result, Input, DatePicker } from 'antd'
import { useRequest, useSetState } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useState, useEffect } from 'react'
import { Player, BigPlayButton } from 'video-react'
import dayjs from 'dayjs'
import { ModalBox } from '../../../../Common/Modal/ModalBox'

export const VideoTypeList001 = ({ type }) => {
    const [pagination, setPagination] = useSetState({ pageIndex: 1, pageSize: 3 })
    const { runAsync } = useRequest(Http, { manual: true })
    const [VideoList, setVideoList] = useState([])
    const [total, setTotal] = useState(0)

    const { project } = JSON.parse(localStorage.getItem('ClientData'))
    const [projectUuid] = Object.keys(project)

    useEffect(() => {
        runAsync({
            url: 'getVideoListByProjectUuidOrImportantPartUuid',
            data: { importantPartUuid: type, projectUuid, ...pagination },
        }).then(res => {
            const { total, list } = res
            setTotal(total)
            setVideoList(list)
        })
    }, [pagination, projectUuid, runAsync, type])

    return (
        <div className="VideoTypeList001">
            <div className="Options ">
                <div>
                    <div>视频名称</div>
                    <Input placeholder="请输入视频名称" onChange={e => setPagination({ tableName: e.target.value })} />
                </div>
                <div>
                    <div>开始日期</div>
                    <DatePicker
                        onChange={e => setPagination({ startDate: e ? dayjs(e).format('YYYY-MM-DD') : null })}
                    />
                </div>
                <div>
                    <div>结束日期</div>
                    <DatePicker onChange={e => setPagination({ endDate: e ? dayjs(e).format('YYYY-MM-DD') : null })} />
                </div>
            </div>
            {VideoList.length === 0 ? (
                <Result title="该项暂无视频数据" />
            ) : (
                <div className="List">
                    <div className="Video">
                        {VideoList.map(({ uuid, fileUrl }) => (
                            <Player key={uuid} fluid={false} width={'100%'} height={'100%'} playsInline src={fileUrl}>
                                <BigPlayButton position="center" />
                            </Player>
                        ))}
                    </div>
                    <div className="pagination">
                        <Pagination
                            current={pagination.pageIndex}
                            pageSize={pagination.pageSize}
                            total={total}
                            onChange={e => setPagination({ pageIndex: e })}
                        />
                    </div>
                </div>
            )}
        </div>
    )
}

export const VideoTypeList002 = ({ type }) => {
    const [OptionsCall, setOptionsCall] = useState()
    const [pagination, setPagination] = useSetState({ pageIndex: 1, pageSize: 10 })
    const { runAsync } = useRequest(Http, { manual: true })
    const [VideoList, setVideoList] = useState([])
    const [total, setTotal] = useState(0)

    const { project } = JSON.parse(localStorage.getItem('ClientData'))
    const [projectUuid] = Object.keys(project)

    useEffect(() => {
        runAsync({
            url: 'getVideoListByProjectUuidOrImportantPartUuid',
            data: { importantPartUuid: type, projectUuid, ...pagination },
        }).then(res => {
            const { total, list } = res
            setTotal(total)
            setVideoList(list)
        })
    }, [pagination, projectUuid, runAsync, type])
    return (
        <div className="VideoTypeList002">
            <div className="Options ">
                <div>视频名称</div>
                <Input placeholder="请输入视频名称" onChange={e => setPagination({ tableName: e.target.value })} />
            </div>
            {VideoList.length === 0 ? (
                <Result title="该项暂无视频数据" />
            ) : (
                <div className="List">
                    <div className="Table">
                        {VideoList.map(({ uuid, tableName, videoDate, fileUrl }) => (
                            <div
                                key={uuid}
                                onClick={() => {
                                    setOptionsCall({
                                        type: 'Annex',
                                        data: { url: fileUrl, title: tableName, width: '90vw' },
                                    })
                                }}
                            >
                                <div>{tableName}</div>
                                <div>{videoDate}</div>
                            </div>
                        ))}
                    </div>
                    <div className="pagination">
                        <Pagination
                            current={pagination.pageIndex}
                            pageSize={pagination.pageSize}
                            total={total}
                            onChange={e => setPagination({ pageIndex: e })}
                        />
                    </div>
                </div>
            )}
            <ModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
